<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" title="添加团队人员"></my-header>
		
		<view class="main-body">
			<u-form :model="form" ref="uForm">
				<!--所属市场-->
				<view>
					<u-form-item :required="true" label-width="70px" label="所属市场：" prop="market2">
						<u-input v-show="zhangbenInput" v-model="form.market2" />
						<u-checkbox-group @change="checkboxGroupChange" size="22">
							<u-checkbox 
								label-size="22"
								v-model="item.checked" 
								v-for="(item, index) in checkboxList" :key="index" 
								:name="item.name"
							>{{item.name}}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view>
				<!--姓名-->
				<view>
					<view>
						<u-form-item :required="true" label-width="70px" label="姓名：" prop="name">
							<u-input placeholder="请输入姓名" placeholder-style="font-size:11px;" v-model="form.name" :clearable="false" :custom-style="moneyStyle"/>
						</u-form-item>
					</view>
				</view>
				<!--电话-->
				<view>
					<view>
						<u-form-item :required="true" label-width="70px" label="电话：" prop="phone">
							<u-input placeholder="请输入电话" placeholder-style="font-size:11px;" v-model="form.phone" :clearable="false" :custom-style="shuomingStyle" />
						</u-form-item>
					</view>
				</view>
				<!--直属上级-->
				<view>
					<u-form-item :required="true" label-width="70px" label="直属上级：" prop="superiorVal">
						<u-input v-model="form.superiorVal" placeholder="请选择上级" placeholder-style="font-size:11px;" type="select" :select-open="shangjiShow" :border="true" @click="shangjiShow = true" />
						<u-select v-model="shangjiShow" mode="mutil-column-auto" :list="shangjiList" @confirm="actionSheetCallback"></u-select>
					</u-form-item>
				</view>
				<!--加入时间-->
				<view>
					<u-form-item :required="true" label-width="70px" label="加入时间：" prop="joinTime">
						<u-input placeholder="请选择时间" placeholder-style="font-size:11px;" v-model="form.joinTime" type="select" :select-open="timeShow" :border="true" @click="timeShow = true" />
						<u-calendar v-model="timeShow" mode="date" @change="timeChange"></u-calendar>
					</u-form-item>
				</view>
				<!--角色-->
				<view>
					<u-form-item :required="true" label-width="70px" label="角色：" prop="role">
						<u-input placeholder="请选择角色" placeholder-style="font-size:11px;" v-model="form.role" type="select" :select-open="jueseShow" :border="true" @click="jueseShow = true" />
						<u-select v-model="jueseShow" mode="mutil-column-auto" :list="jueseList" @confirm="jueseCallback"></u-select>
					</u-form-item>
				</view>
				<!--H9职级-->
				<view class="mar-bot-15">
					<u-form-item :required="true" label-width="70px" label="H9职级：" prop="H9" :border-bottom="false">
						<u-input placeholder="请选择职级" placeholder-style="font-size:11px;" v-model="form.H9" type="select" :select-open="zhijiShow" :border="true" @click="zhijiShow = true" />
						<u-select v-model="zhijiShow" mode="mutil-column-auto" :list="zhijiList" @confirm="zhijiCallback"></u-select>
					</u-form-item>
				</view>
				<!--紧急联系人信息-->
				<u-gap height="2" bg-color="#79CB42"></u-gap>
				<view class="mar-top-10">
					<view class="fon-siz-13 fon-wei-bol" style="color:red;">紧急联系人信息</view>
					<u-form-item :required="true" label-width="70px" label="姓名：" :border-bottom="false" prop="urgentName">
						<u-input placeholder="真实姓名" v-model="form.urgentName" :border="true" />
					</u-form-item>
					<u-form-item style="margin-top:-10px;" :required="true" label-width="70px" label="手机号：" :border-bottom="false" prop="urgentPhone">
						<u-input placeholder="手机号" v-model="form.urgentPhone" :border="true" />
					</u-form-item>
					<u-form-item :required="true" label-width="70px" label="关系：" prop="urgenTrelationship">
						<u-input placeholder="请选择关系" placeholder-style="font-size:11px;" v-model="form.urgenTrelationship" type="select" :select-open="jinjiShow" :border="true" @click="jinjiShow = true" />
						<u-select v-model="jinjiShow" mode="mutil-column-auto" :list="jinjiList" @confirm="jinjiCallback"></u-select>
					</u-form-item>
				</view>
				
			</u-form>
			
			<view class="address" style="margin:30rpx 0 0rpx 0;">
				<button type="warn">取消</button>
				<button style="background:#0051BA" type="primary" >确认添加</button>
			</view>
			<view style="margin-top:20px;">
				<text style="color:red;">温馨提示：红色星为必填项，</text>
				<text style="color:#0051BA;">蓝色星为选填项</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				rules: {
					// 所属市场
					market2: [
						{
							required: true,
							message: '请至少选择一项！',
							trigger: ['blur', 'change']
						}
					],
					// 姓名
					name: [
						{
							required: true,
							message: '请填写姓名！',
							trigger: ['blur', 'change']
						}
					],
					// 电话
					phone: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						},
						// 校验手机号是否已存在
						{
							asyncValidator: (rule, value, callback) => {
								this.$api.my_staffing_addPersonnel_phone_verification({
									phone    : value ,
								},(res)=>{
									console.log(res)
									if(res.code == -200) {
										callback(new Error('该号码已重复！'));
									} else {
										// 如果校验通过，也要执行callback()回调
										callback();
									}
								})
							},
						}
					],
					// 直属上级
					superiorVal: [
						{
							required: true,
							message: '请选择上级！',
							trigger: ['blur', 'change']
						}
					],
					// 加入时间
					joinTime: [
						{
							required: true,
							message: '请选择加入时间！',
							trigger: ['blur', 'change']
						}
					],
					// 角色
					role: [
						{
							required: true,
							message: '请选择角色！',
							trigger: ['blur', 'change']
						}
					],
					// H9职级
					H9: [
						{
							required: true,
							message: '请选择职级！',
							trigger: ['blur', 'change']
						}
					],
					// 紧急联系人姓名
					urgentName: [
						{
							required: true,
							message: '请填写联系人姓名！',
							trigger: ['blur', 'change']
						}
					],
					// 紧急联系人手机号
					urgentPhone: [
						{
							required: true, 
							message: '请填写联系人手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					// 紧急联系人关系
					urgenTrelationship: [
						{
							required: true,
							message: '请选择联系人关系！',
							trigger: ['blur', 'change']
						}
					]
				},
				form : {
					market 	 : '', 
					market2  : '', // 过度用，只是为了做必填验证效果 以market为主
					name 	 : '',
					phone    : '',
					superior_id : '',
					superiorVal : '',
					joinTime : '',
					role     : '',
					H9		 : '', 
					urgentName : '',
					urgentPhone : '',
					urgenTrelationship : '',
					company_id	: '', // 部门id
					company_parent_id : '',
				},
				background	: {
					backgroundColor: ' ',
				},
				zhijiList: [
					{label:'H1',value:1},
					{label:'H2',value:2},
					{label:'H3',value:3},
					{label:'H4',value:4},
					{label:'H5',value:5},
					{label:'H6',value:6},
					{label:'H7',value:7},
					{label:'H8',value:8},
					{label:'H9',value:9},
					{label:'H10',value:10},
				],
				jinjisjValue : '',
				timeShow : false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				jinjiValue  : '',
				jinjiList : [
					{label:'夫妻',value:1},
					{label:'父母',value:2},
					{label:'兄弟',value:3},
					{label:'姐妹',value:4},
				],
				jinjiShow : false,
				jueseShow : false,
				zhijiShow : false,
				jueseList: [],
				value: '',
				shangjiShow : false,
				checkboxList: [],
				shangjiList : [],
				shuomingStyle : {
					minWidth:'300rpx',
					borderBottom:'1px solid #ccc',
					minHeight:'30px',
				},
				moneyStyle : {
					minWidth:'300rpx',
					borderBottom:'1px solid #ccc',
					minHeight:'30px',
				},
				zhangbenlist: [
					{value:'乐山市',type:1},
					{value:'眉山市',type:2},
					{value:'海口市',type:3},
					{value:'小怪线充项目',type:4},
					{value:'桩柜产销项目',type:5},
					{value:'公司',type:6},
				],
			}
		},
		methods:{
			// subTijiao
			async subTijiao(){
				let data = {
					market 				: this.form.market , // 所属市场
					name 				: this.form.name , // 姓名
					phone 				: this.form.phone , // 手机号
					superior_id 		: this.form.superior_id , // 直属上级
					joinTime 			: this.form.joinTime , // 加入时间
					role 				: this.form.role , // 角色
					company_id 			: this.form.company_id , 
					company_parent_id 	: this.form.company_parent_id , 
					H9 					: this.form.H9 , // H9职级
					urgentName 			: this.form.urgentName , // 紧急联系人姓名
					urgentPhone 		: this.form.urgentPhone , // 紧急联系人手机号
					urgenTrelationship 	: this.form.urgenTrelationship , // 紧急联系人关系
				}
				let res = await this.asyncPublic('/my/Staffing/addSub',data)
				console.log(res);
				this.load_close();
			},
			// 提交事件
			sub(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.load();
						this.subTijiao();
						console.log('验证成功');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 紧急联系人关系
			jinjiCallback(e){
				this.form.urgenTrelationship = e[0].label
				console.log(e)
			},
			// 职级选择
			zhijiCallback(e){
				console.log(e)
				this.form.H9 = e[0].label
			},
			// 直属上级选择
			actionSheetCallback(e){
				this.form.superior_id = e[2].value
				this.form.superiorVal = e[1].label + ' - ' + e[2].label
				console.log(e)
			},
			// 加入时间选择
			timeChange(e){
				this.form.joinTime = e.result
			},
			// 角色选择
			jueseCallback(e) {
				this.form.role = e[0].label + ' - ' + e[1].label
				this.form.company_id = e[1].value
				this.form.company_parent_id = e[0].value
				console.log(e);
			},
			// 所属市场选择事件
			checkboxGroupChange(e) {
				for( let i=0; i<=e.length; i++ ){
					this.form.market2 = e[i-1]
				}
				this.form.market = e
			},
			// 首次查询事件
			async onSelect(){
				let res = await this.asyncPublic('/my/Staffing/onSelect',1)
				this.checkboxList = res.data.zbArr
				this.jueseList    = res.data.juese
				this.shangjiList  = res.data.shangji
				console.log(res);
				this.load_close();
			},
		},
		onLoad() {
			this.load();
			this.onSelect()
		},
		//页面除此渲染完成
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		// 下拉改变头部背景色
		onPageScroll(res) {
			if( res.scrollTop > 0 )
			{
				this.background.backgroundColor = '#005687';
			}else{
				this.background.backgroundColor = ' ';
			}
		},
		components:{
			myHeader, 
		}
	}
</script>

<style>
	.u-form-item{
		padding:5px !important;
	}
	.u-icon__icon{
		font-size:12px !important;
	}
	.u-input--border{
		height:60rpx !important;
	}
	.u-input__input{
		font-size:22rpx !important;
		min-height:60rpx !important;
	}
	.address-xx{
		margin-top:20rpx;
		border:1rpx solid #ccc;
		width:610rpx;
		height:150rpx;
		padding-left:20rpx;
	}
	.address{
		display:flex;
		align-items: center;
		justify-content: space-between;
		margin-top:10rpx;
	}
	.address button{
		font-size:13px;
		width:140px;
		border-radius: 20px;
	}
	.address h2{
		width:180rpx;
		text-align:center;
		border:1rpx solid #ccc;
		padding:10rpx 0 10rpx 0;
	}
	.main-body{
		padding:10px 20px 30px 20px;
		border-radius: 8px;
		border: 1px solid #ccc;
		background:#fff;
	}
	.main{
		padding:20px;
		min-height:100vh;
		background-image: linear-gradient( #005687, #E4E4E5 );
	}
</style>
